<template>
  <a-card :bordered="false">
    <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-model-item label="字典多选1">
            <z-multi-select-tag v-model="form.multi1" :options="dictOptions1"  placeholder="请选择"></z-multi-select-tag>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="字典多选2" >
            <ZMultiSelectTag  v-model="form.multi2" placeholder="请选择"  dictCode="MB_SYSTEM_YES_NO"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="字典多选3">
            <z-multi-select-tag  v-model="form.multi3" :options="dictOptions1" type="checkbox"></z-multi-select-tag>
          </a-form-model-item>
        </a-col>
          <a-col :span="24">
            <a-form-model-item label="下拉搜索" >
              <z-search-select-tag placeholder="请选择" v-model="form.selectSearchValue" dict="MB_SYSTEM_YES_NO"></z-search-select-tag>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="字典下拉" >
              <z-dict-select-tag  v-model="form.dict1" allowClear placeholder="请输入用户性别"  :options="dictOptions1"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="字典下拉(单选)" >
              <z-dict-select-tag  v-model="form.dict2" type="radio" placeholder="请输入用户性别"  dictCode="MB_SYSTEM_YES_NO"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="字典下拉(button)" >
              <z-dict-select-tag  v-model="form.dict3" type="radioButton" placeholder="请输入用户性别"  dictCode="MB_SYSTEM_YES_NO"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="同步下拉" >
              <ZSyncSelectTag v-model="form.sync"  placeholder="请输入" url="/res/list" :optionKey="{label:'title',value:'id'}"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <span>{{form.sync}}</span>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="同步下拉(多选)" >
              <ZSyncSelectTag  v-model="form.syncMult" mode="multiple"  placeholder="请输入" url="/res/list" :optionKey="{label:'title',value:'id'}"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <span>{{form.syncMult}}</span>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="异步下拉" >
              <ZAsyncSelect v-model="form.async" url="/sys/dict/tree/page" placeholder="请输入" :optionKey="{label:'dictName',value:'dictCode'}"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="异步下拉(多选)" >
              <ZAsyncSelect v-model="form.asyncMult" url="/sys/dict/tree/page" mode="multiple" placeholder="请输入" :optionKey="{label:'dictName',value:'dictCode'}"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="用户选择" >
              <ZSelectMultiUser v-model="form.user"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="部门选择(多选)">
            <ZSelectDept v-model="deptId" :tree-checkable="true" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="日期选择">
              <a-date-picker v-model="date1" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="用户选择">
              <ZSelectUserByDep :multi="false" v-model="form.userdept" />
            </a-form-model-item>
          </a-col>
            <a-col :span="24">
              <a-form-model-item label="高级查询">
                <ZSuperQuery :fieldList="superQuery.fieldList"  />
              </a-form-model-item>
            </a-col>
          <a-col :span="24">
            <a-form-item label="图片上传">
              <z-image-upload :number="2" v-model="imgList"></z-image-upload>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="文件上传">
              <z-upload v-model="fileList" :fileNames="fileNames" ></z-upload>
              <!-- fileStorageType="Database" -->
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="ZModal弹窗">
              <a-button style="margin-right: 8px;" @click="()=>modal.visible=true">点击弹出ZModal</a-button>
              <span style="margin-right: 8px;">全屏化：<a-switch v-model="modal.fullscreen"/></span>
              <span style="margin-right: 8px;">允许切换全屏：<a-switch v-model="modal.switchFullscreen"/></span>
            </a-form-model-item>
            <z-modal
              :visible.sync="modal.visible"
              :width="1200"
              :title="modal.title"
              :fullscreen.sync="modal.fullscreen"
              :switchFullscreen="modal.switchFullscreen"
            >
              <template v-for="(i,k) of 30">
                <p :key="k">这是主体内容，高度是自适应的</p>
              </template>
            </z-modal>
          </a-col>
          <a-col :span="24">
            <a-form-item label="权限按钮测试">
              <a-button v-hasPermi="'system:test:test'" @click="handleTest">测试</a-button>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="方法调用测试">
              <a-button @click="deleteRecord">测试</a-button>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="文件上传">
              <AuthImg style="width:100px;height:100px;" :fileNo="imgList[0]" />
            </a-form-item>
          </a-col>
        </a-row>
    </a-form-model >
  </a-card>
</template>

<script>
import ZDictSelectTag from '@/components/dict/ZDictSelectTag.vue'
import ZMultiSelectTag from '@/components/dict/ZMultiSelectTag'
import ZSearchSelectTag from '@/components/dict/ZSearchSelectTag'
import ZSelectMultiUser from '@/components/zzbiz/ZSelectMultiUser'
import ZSelectUserByDep from '@/components/zzbiz/ZSelectUserByDep'
import AuthImg from '@/components/zz/AuthImg'
import Criteria from '@/utils/criteria'
import { OPERATOR } from '@/store/mutation-types'
import ZImageUpload from '@/components/zz/ZImageUpload'
import ZUpload from '@/components/zz/ZUpload'
import ZSelectDept from '@/components/zzbiz/ZSelectDept'
import ZSuperQuery from '@/components/zz/ZSuperQuery'
import { getAction } from '@/services/manage'
import ZSyncSelectTag from '@/components/dict/ZSyncSelectTag'
import ZAsyncSelect from '@/components/dict/ZAsyncSelect'
export default {
  components: {
    ZDictSelectTag,
    ZMultiSelectTag,
    ZSearchSelectTag,
    ZSelectMultiUser,
    ZImageUpload,
    ZUpload,
    ZSelectDept,
    ZSelectUserByDep,
    ZSuperQuery,
    AuthImg,
    ZSyncSelectTag,
    ZAsyncSelect
  },
  data() {
    return {
      form: {
        user: 'admin',
        userdept: 'admin3,admin',
        syncMult: '4e672960-61ed-4c79-b895-52b3a3912bd5,67411f1f-8a3e-4ac8-b65b-dce6fb440599,adc23669-6c80-4462-89ab-b2cf8bf470c9',
        sync: '',
        async: 'ERP_INV_INVENTORY_WAY',
        asyncMult: 'USE_STATUS,ERP_COMMON_YESNO,ERP_INV_INVENTORY_WAY'
      },
      imgList: ['edd0aa7a-7d4a-4294-96a6-6d56ccff3292'],
      imgFileNo: 'edd0aa7a-7d4a-4294-96a6-6d56ccff3292',
      fileList: ['30a5f49d-4971-467a-a096-da81a126f5b2111111'], // '2128a0c4-6ffc-489a-b23f-8394b9cfc457', '402929b9-1f24-417f-85fe-90122feced6f'
      fileNames: ['4444.xlsx'], // '111222.xlsx', '20220916对接.doc'
      dictOptions1: [
        { value: '1', label: '男' },
        { value: '2', label: '女' }
      ],
      modal: {
        title: '这里是标题',
        visible: false,
        fullscreen: true,
        switchFullscreen: true
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      date1: '2022-05-01',
      deptId: ['19'],
      superQuery: {
        fieldList: [
          { type: 'input', value: 'name', text: '姓名', children: [
            { type: 'input', value: 'name1', text: '姓名1' }
          ] },
          { type: 'select', value: 'sex', text: '性别', dictCode: 'ERP_COMMON_YESNO' },
          { type: 'number', value: 'age', text: '年龄' },
          {
            type: 'select', value: 'hobby', text: '爱好',
            options: [
              { label: '音乐', value: '1' },
              { label: '游戏', value: '2' },
              { label: '电影', value: '3' },
              { label: '读书', value: '4' }
            ]
          },
          { type: 'date', value: 'createdDate', text: '创建日期' },
          { type: 'user', value: 'createdBy', text: '创建人' },
          { type: 'dept', value: 'dept', text: '创建人部门' }
        ]
      },
      set: new Set(['add', 'edit'])
    }
  },
  auth: { // 权限校验注入设置
    deleteRecord: 'delete' // key为需要注入权限校验的方法名，这里为 deleteRecord 方法；值为需要校验的操作权限，这里为 delete 操作权限
  },
  methods: {
    deleteRecord() {
      // --auth-inject
      console.log('有执行权限')
    },
    exports() {
      // file/download/7a81e2df-4b62-4832-8fa0-069941897e38
    },
    test() {
      getAction('/sys/dict/tree/page').then(res => {
        console.log(1, res)
      })
      setTimeout(() => {
        getAction('/sys/dict/tree/page').then(res => {
          console.log(2, res)
        })
      }, 20)
      // setTimeout(() => {
      //   getAction('/sys/dict/tree/page').then(res => {
      //     console.log(res)
      //   })
      // }, 1000)
    },
    handleTest() {
      this.test()
    }
  },
  mounted() {
    // 查询构造器
    // 使用方法一
    const param = new Criteria()
    param.addCriterion('resourceType', OPERATOR.EQ, 'ELEMENT')
      .or()
      .addCriterion('username', OPERATOR.EQ, 'admin')
      .addCriterion('username', OPERATOR.EQ, 'admin1')
      .and()
      .addCriterion('age', OPERATOR.GT, 18)
      .addCriterion('score', OPERATOR.EQ, 60)
      .end()
      .end()
      .addOrder('createTime', true)
      .addOrder('updateTime', true)
    console.log(param)
    const aaa = ['admin', 'admin2', 'admin3']
    const ccc = new Criteria()
    aaa.forEach((item, i) => {
      if (i === 0) {
        ccc.or().addCriterion('user', OPERATOR.EQ, item)
      } else {
        ccc.addCriterion('user', OPERATOR.EQ, item)
      }
    })
    ccc.end()
    console.log(ccc)
    // 使用方法二
    const form = {
      username: 'admin',
      sex: '17'
    }
    const b = new Criteria()
    b.addCriterions(form, OPERATOR.LIKE)
    // console.log(b)
  }
}
</script>

<style>

</style>
